<!DOCTYPE html>
{%load staticfiles%}
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="{% static 'lib/bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css" />
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" >后台管理系统</a>
    </div>
    <ul class="nav navbar-nav navbar-right" style="margin-right: 25px;">
        <li><a href="#"><span class="badge" style="background:#c12e2a;">23</span></a></li>
        <li><a href="/logout/"><span class="glyphicon glyphicon-off"></span>&nbsp;注销</a></li>
    </ul>

<!--侧边栏-->
     <div class="navbar-default navbar-collapse" style="position: absolute;left: 0;width:250px;top: 51px;z-index:1;border-right: 1px solid #cccccc;height: 918px;">
        <ul class="nav">
            <li>
                <a href="#sub1" data-toggle="collapse"> 设备信息 <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                <ul id="sub1" class="nav collapse">
                    <li><a class="deviceinfo"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;设备列表</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;日志信息</a></li>
                </ul>
            </li>

        </ul>
     </div>
</nav>

<div class="page_main" style="position: absolute;top: 50px;left: 250px;z-index:1;bottom: 0;right: 0;">
    <div class="panel panel-default" id="pstable">
  <!-- Default panel contents -->
  <div class="panel-heading">设备列表</div>

  <!-- Table -->
  <table class="table">
      <thead>
            <tr>
                <th>id</th>
                <th>device</th>
            </tr>
        </thead>
        <tbody>
            {% for row in device_list %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.device_name }}</td>
                    <td>
                        <a class="moredatabtn">详情</a>
                        |
                        <a href="/del_data/?nid={{ row.id }}">删除</a>
                </tr>
            {% endfor %}
        </tbody>

  </table>
</div>
</div>

<script src="{% static 'lib/jquery/jquery.js' %}"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="{% static 'lib/bootstrap/js/bootstrap.js' %}"></script>
<script>
    $(document).ready(function () {
        $('.moredatabtn').click(function () {
            var tds = $(this).parent().prevAll();
            var id = $(tds[1]).text();
            $.ajax({
                url: '/more_data/?nid=' + id,
                type: 'GET',
                {#data: {'nid': id},#}
                success: function (arg) {
                    $("#pstable").html(arg);
                }
            });
        });

        $('#adddevice').click(function () {
            devicename = $('#name').val();
            devicemac = $('#mac').val();
            $.ajax({
                url: '/modal_add_device/',
                type: 'POST',
                data: {'name': devicename, 'mac': devicemac},
                success: function (arg) {
                    $("#pstable").html(arg);
                }
            })

        });
    });

          $('.deviceinfo').click(function () {
            $.ajax({
                url: '/main/',
                type: 'GET',
                success: function (arg) {
                    $("#pstable").html(arg);
                }
            })

        })
    </script>
</body>
</html>